import React from 'react';
import {View, Image, ImageBackground, Text, StyleSheet} from 'react-native';
import Icons from 'react-native-vector-icons/FontAwesome';

const styles = StyleSheet.create({
  container: {
    height: 250,
    width: '100%',
    // backgroundColor: 'red',
    marginBottom: 10,
  },
  image: {
    // flex: 1,
    height: 250,
    resizeMode: 'stretch',
    justifyContent: 'center',
  },
  content: {
    height: 250,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'stretch',
  },
  topContent: {
    height: 50,
    flexDirection: 'row',
    // backgroundColor: 'yellow',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  topUserPhoto: {
    width: 30,
    height: 30,
    borderRadius: 15,
    marginRight: 10,
  },
  tcLeft: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  tcRight: {
    backgroundColor: '#E2E6CD',
    width: 60,
    height: 30,
    borderRadius: 20,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  tcType: {
    paddingTop: 5,
    paddingRight: 10,
    paddingBottom: 5,
    paddingLeft: 10,
    backgroundColor: '#E2E6CD',
    borderRadius: 20,
  },
  redCircle: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'red',
    marginRight: 5,
  },
  bottomContent: {
    height: 60,
    backgroundColor: '#eeeeeea0',
    paddingLeft: 10,
    paddingRight: 10,
    justifyContent: 'space-between',
    flexDirection: 'row',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
  },
  btAddress: {
    flexDirection: 'row',
    height: 30,
    alignItems: 'flex-end',
  },
  btAddressText: {
    marginLeft: 10,
    color: 'white',
    fontSize: 12,
  },
  btContentTitle: {
    height: 30,
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold',
  },
  btOnline: {
    // height: 60,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  btOnlineCount: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  btOnlineText: {
    color: 'white',
    fontSize: 10,
  },
});

const zhiboList = [
  {
    id: 1,
    image: require('./assets/zbl-1.png'),
    title: '带你们去耍',
    address: '成都龙泉驿',
    userPhoto: require('./assets/user-photo.png'),
    typeName: '风景',
    count: 3200,
  },
  {
    id: 2,
    image: require('./assets/zbl-2.png'),
    title: '带你们去耍',
    address: '成都龙泉驿',
    userPhoto: require('./assets/user-photo.png'),
    typeName: '风景',
    count: 3200,
  },
];
export default function ZhiBoList() {
  return (
    <>
      {zhiboList.map(item => {
        return (
          <View key={item.id} style={styles.container}>
            <ImageBackground source={item.image} style={styles.image}>
              <View style={styles.content}>
                <View style={styles.topContent}>
                  <View style={styles.tcLeft}>
                    <Image
                      style={styles.topUserPhoto}
                      source={item.userPhoto}></Image>
                    <Text style={styles.tcType}>{item.typeName}</Text>
                  </View>
                  <View style={styles.tcRight}>
                    <Text style={styles.redCircle}></Text>
                    <Text>直播</Text>
                  </View>
                </View>
                <View style={styles.bottomContent}>
                  <View>
                    <View style={styles.btAddress}>
                      <Icons name="map-marker" size={20} color="white"></Icons>
                      <Text style={styles.btAddressText}>{item.address}</Text>
                    </View>
                    <View>
                      <Text style={styles.btContentTitle}>{item.title}</Text>
                    </View>
                  </View>
                  <View style={styles.btOnline}>
                    <Text style={styles.btOnlineCount}>{item.count}</Text>
                    <Text style={styles.btOnlineText}>人在看</Text>
                  </View>
                </View>
              </View>
            </ImageBackground>
          </View>
        );
      })}
    </>
  );
}
